<template>
    <div class="wh-100" v-loading="loading" style="background-color: #fff">
        <div style="height: 60px" class="w-100 d-flex-between-center px-12 bor-base-b">
            <div class="fs-16 fw-7 d-flex">广告管理</div>
            <el-button type="primary" @click="skipAdd">+添加广告</el-button>
        </div>
        <div class="w-100 h-10 d-flex-between-center px-12 fs-14">
            <div>
<!--                <el-checkbox style="margin-right: 12px" @change="selectAll" v-model="checked"></el-checkbox>-->
<!--                <Button @click="exportData">导出数据</Button>-->
                <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
            </div>
            <div class="d-flex-align-center w-40">
                <Select  v-model="pageParams.advertisementType" placeholder="广告类型" class="w-30 ml-auto" style="margin-right: 12px">
                    <Option v-for="item in typeOptions" :key="item.value"  :value="item.value">{{item.label}}</Option>
                </Select>
                <Select  v-model="pageParams.advertisementLocation" placeholder="广告位置" class="w-25" style="margin-right: 12px">
                    <Option v-for="item in locationOptions" :key="item.value" :value="item.value">{{item.label}}</Option>
                </Select>
                <Button style="margin-right: 12px" type="primary" @click="search">搜索</Button>
            </div>
        </div>
        <Alert v-show="openTip" show-icon>
            已选择
            <span >{{ selectList.length }}</span>
            项
            <a @click="toggleSelection">清空</a>
        </Alert>
        <div class="w-100 h-70 overflow-auto-hidden">

            <el-table ref="table" @selection-change="handleSlectionChange" :data="tableData" empty-text="暂无数据">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="广告图片">
                    <template slot-scope="scope">
                        <el-image style="width: 88px;height: 49px" :src="scope.row.advertisementPhoto" class="image_body">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="广告类型" prop="advertisementType"></el-table-column>
                <el-table-column label="广告地址" prop="advertisementUrl"></el-table-column>
                <el-table-column label="广告位置">
                    <template slot-scope="scope">
                        <div v-if="scope.row.advertisementLocation === '0'">
                            首页轮播图
                        </div>
                        <div v-if="scope.row.advertisementLocation === '1'">
                            首页广告位
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updateTime"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="topDialog(scope.row)">排序</el-button>
                        <el-button type="text" @click="modification(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="w-100 h-10 d-flex-around-center fs-14">
            <Page show-total :total="pageParams.total" :page-size="pageParams.pageSize" :current="pageParams.pageNumber" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer />
        </div>
        <el-dialog title="置顶排序" :visible.sync="topDialogFormVisible" class="">
            <div class="px-24 fs-14">
                <div class="bor-base-b bor-base-t mt-12" style="">
                    <el-form ref="form" :model="topForm" label-width="100px">
                        <el-form-item label="是否置顶" class="mt-12">
                            <el-radio-group disabled v-model="topForm.isTop">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" v-model="topForm.sortOrder" style="width: 15%"></el-input>
                            <span style="color: #909399; margin-left: 20px">数字越小约靠前，0不参与置顶排序，根据发布时间排序</span>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="py-12" style="height: 70px">
                    <el-button type="primary" style="float: right; margin-left: 12px" @click="topSubmit">确定</el-button>
                    <el-button style="float: right" @click="topClose">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { adListingDataAPI, adTopAPI, deleteAnADAPI } from '@/api/siteManagement/advertisingManagementApis';
import { topAPI } from '@/api/bys/recruitmentManagement';

export default {
    data() {
        return {
            loading: false,
            checked: false,
            pageParams: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                advertisementType: "全部广告类型",
                advertisementLocation: '3'
            },
            tableData: [],
            typeOptions: [
                {
                    label: '全部广告类型',
                    value: '全部广告类型'
                },
                {
                    label: '宣传广告',
                    value: '宣传广告'
                },
                {
                    label: '双选会',
                    value: '双选会'
                },
                {
                    label: '宣讲会',
                    value: '宣讲会'
                }
            ],
            locationOptions: [
                {
                    label: '全部广告位置',
                    value: '3'
                },
                {
                    label: '首页轮播图',
                    value: '0'
                },
                {
                    label: '首页广告位',
                    value: '1'
                }
            ],

            multipleSelection: [],
            heightNmber:'95%',
            openTip:true,
            selectList:[],
            topDialogFormVisible: false,
            topForm: {
                isTop: false,
                sortOrder: 0,
                id: ''
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        topSubmit() {
            adTopAPI(this.topForm).then(res => {
                if (res.success) {
                    this.$message.success(res.message);
                    this.topDialogFormVisible = false;
                } else {
                    this.$message.error(res.message);
                    this.topDialogFormVisible = false;
                }
                this.getList();
            });
        },
        topClose() {
            this.topDialogFormVisible = false;
        },
        handleSlectionChange(selection) {
            this.selectList=selection
            console.log(selection, '选中行的数据');
        },
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
            this.$refs.table.clearSelection();
        },
        //表格数据
        getList() {
            // advertisementType: "全部广告类型",
            // advertisementLocation: '3'
            let advertisementType =null
            let advertisementLocation=null
            if(this.pageParams.advertisementType !== "全部广告类型"){
                advertisementType=this.pageParams.advertisementType
            }
            if(this.pageParams.advertisementLocation !== "3"){
                advertisementLocation=this.pageParams.advertisementLocation
            }
            adListingDataAPI({ ...this.pageParams,advertisementType:advertisementType,advertisementLocation:advertisementLocation}).then(res => {
                console.log('广告', res);
                this.tableData = res.result.records;
                this.pageParams.total = res.result.total;
            });
        },
        //搜索
        search() {
            this.getList();
        },
        topDialog(row) {
            this.topForm.sortOrder=row.sort;
            this.topDialogFormVisible = true;
            this.topForm.id = row.id;
        },
        modification(row) {
            sessionStorage.setItem(
                'advertisingDetail',
                JSON.stringify({
                    dataRow: row
                })
            );
            this.$router.push({
                name: 'AddAnAD',
                params: {
                    dataRow: row
                }
            });
            console.log(id, '修改');
        },
        deleteData(id) {
            deleteAnADAPI(id).then(res => {
                if (res.code === 200) {
                    this.$Message.success('删除成功');
                    this.getList();
                }
            });
            console.log(id, '删除');
            // this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // })
            //     .then(() => {
            //         this.$message.success('');
            //         this.getList();
            //     })
            //     .catch(() => {
            //         this.$message.error('');
            //     });
        },
        //选择项发生变化时触发事件
        hanleSelectionChange(val) {
            this.multipleSelection = val;
        },
        selectAll() {
            console.log(this.checked);
            if (this.checked) {
                this.$refs.table.toggleAllSelection(); //表格全部选中
            } else {
                this.$refs.table.clearSelection();
            }
        },
        //导出数据
        exportData() {
            console.log('导出数据');
        },
        //跳转到添加页
        skipAdd() {
            this.$router.push({ name: 'AddAnAD', query: { optionType: '添加广告' } });
        },
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getList();
        }
        // endregion
    }
};
</script>

<style scoped>
.image_body {
    width: 300px;
    height: 160px;
}
</style>
